<template>
  <div>
    <el-form ref="form" :model="tmpTenantInfo" :rules="tenantInfoRules" label-width="80px">
      <!--      <el-row :gutter="10">-->
      <!--        <el-col :span="11">-->
      <el-form-item label="CPU" prop="tenantCpu">
        <div style="width: 95%">
          <el-input v-model="tmpTenantInfo.tenantCpu" style="width: 100%;"
                    @blur="checkInputInfo"
          >
            <template slot="append">
              <div class="custom-suffix">
                核
              </div>
            </template>
          </el-input>
        </div>
        <span
          v-show="remainingResourceInfo.remainingCpu !== undefined"
        >
          可用资源{{ remainingResourceInfo.remainingCpu }}核
        </span>
      </el-form-item>
      <!--        </el-col>-->
      <!--        <el-col :span="11">-->
      <el-form-item label="内存" prop="tenantMem">
        <div style="width: 95%">
          <el-input v-model="tmpTenantInfo.tenantMem" style="width: 100%;"
                    @blur="checkInputInfo"
          >
            <template slot="append">
              <div class="custom-suffix">
                GB
              </div>
            </template>
          </el-input>
        </div>
        <span
          v-show="remainingResourceInfo.remainingMem !== undefined"
        >
          可用资源{{ (remainingResourceInfo.remainingMem / 1024).toFixed(1) }}GB
        </span>
      </el-form-item>
      <!--        </el-col>-->
      <!--      </el-row>-->
      <el-form-item>
        <div style="display: flex; justify-content: right; width: 95%;">
          <el-button type="primary" @click="editQuota('form')"
                     class="el-button-primary-style"
          >修改
          </el-button>
          <el-button @click="closeDialog"
                     class="el-button-primary-style"
                     type="primary"
          >取消
          </el-button>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  export default {
    name: "QuotaManageDialog",
    props: ['tenantInfo'],
    data() {
      return {
        tmpTenantInfo: {},
        tmpTenantInfo1: {},
        tenantInfoRules: {
          tenantCpu: [
            {required: true, message: '请输入CPU大小', trigger: 'blur'},
            {
              pattern: /^([0-9])*$/,
              message: 'CPU只能包含数字',
              trigger: ['blur', 'change']
            },
          ],
          tenantMem: [
            {required: true, message: '请输入内存大小', trigger: 'blur'},
            {
              pattern: /^([0-9])*$/,
              message: '内存只能包含数字，且只能为整数',
              trigger: ['blur', 'change']
            },
          ],
        },
        remainingResourceInfo: {},
      }
    },
    methods: {
      editQuota(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            if (!this.checkInputInfo()) {
              return;
            }
            this.tmpTenantInfo1 = JSON.parse(JSON.stringify(this.tmpTenantInfo));
            this.tmpTenantInfo1.tenantMem = Number.parseInt(this.tmpTenantInfo.tenantMem) * 1024;
            this.$emit("editQuotaManage", "edit", this.tmpTenantInfo1)
          } else {
            return false;
          }
        });
      },
      closeDialog() {
        // this.tmpTenantInfo = JSON.parse(JSON.stringify(this.tenantInfo));
        this.$emit("editQuotaManage", "close");
      },
      checkInputInfo() {
        if (this.tmpTenantInfo.tenantCpu > this.remainingResourceInfo.remainingCpu + this.tenantInfo.tenantCpu) {
          this.$message.error("CPU数值不能大于可用数值");
          return false;
        }
        if (this.tmpTenantInfo.tenantMem * 1024 > this.remainingResourceInfo.remainingMem + this.tenantInfo.tenantMem) {
          this.$message.error("内存数值不能大于可用数值");
          return false;
        }
        return true;
      },
    },
    beforeMount() {
      this.tmpTenantInfo = JSON.parse(JSON.stringify(this.tenantInfo));
      this.tmpTenantInfo.tenantMem = this.tenantInfo.tenantMem / 1024;
      this.$tenantManageApi.resourceSurplusInfo(this.tenantInfo.clusterId).then((res) => {
        if (res && res.code === 200) {
          this.remainingResourceInfo = res.data;
        }
      });
    }
  }
</script>

<style scoped>
  .custom-suffix {
    width: 30px; /* 设置后缀宽度 */
    display: flex;
    justify-content: center;
    align-items: center;
  }
</style>
